<template>
  <header class="topbar" role="banner">
    <div class="container">
      <a class="brand" href="/" @click.prevent="setActive(-1, '/')">
        <img :src="logo" alt="Read Leaf logo" class="logo" />
        <span class="brand-text">红叶</span>
      </a>

      <button class="menu-toggle" :aria-expanded="mobileOpen" aria-controls="main-nav"
        @click="mobileOpen = !mobileOpen">
        <span class="sr-only">切换菜单</span>
        <span class="hamburger" aria-hidden="true"></span>
      </button>

      <nav id="main-nav" class="nav" :class="{ open: mobileOpen }" role="navigation" aria-label="主导航">
        <ul>
          <li class="dropdown" @mouseenter="showTools = true" @mouseleave="showTools = false">
            <a href="#" :class="{ active: isToolActive }">
              工具
            </a>
            <ul class="dropdown-menu" v-show="showTools">
              <li><a href="/base64" @click.prevent="setActive('base64', '/base64')">Base64编解码</a></li>
              <li><a href="/json" @click.prevent="setActive('json', '/json')">JSON格式化</a></li>
              <li><a href="/html" @click.prevent="setActive('html', '/html')">HTML格式化</a></li>
              <li><a href="#" @click.prevent="setActive('barcode', '/barcode')">条形码生成</a></li>
              <li><a href="/timestamp" @click.prevent="setActive('timestamp', '/timestamp')">时间戳转换</a></li>
            </ul>
          </li>
          <li v-for="(item, idx) in items" :key="item.key">
            <a :href="item.href" :class="{ active: idx === activeIndex }" @click.prevent="setActive(idx, item.href)">
              {{ item.label }}
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <router-view></router-view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import logo from './assets/read_leaf.png'
import { useRouter, useRoute } from 'vue-router'

const mobileOpen = ref(false)
const activeIndex = ref(-1)
const showTools = ref(false)
const router = useRouter()
const route = useRoute()

// 检查当前路由是否是工具类页面
const isToolActive = computed(() => {
  return ['/base64', '/json', '/html', '/barcode', '/timestamp'].includes(route.path)
})

const items = [
  { key: 'navigation', label: '导航', href: '/navigation' },
  { key: 'resources', label: '资源', href: '/resources' },
  { key: 'blog', label: '博客', href: '#blog' }
]

function setActive(idx: string | number, href?: string) {
  if (typeof idx === 'string') {
    // 处理工具菜单项
    switch (idx) {
      case 'base64':
      case 'json':
      case 'html':
      case 'barcode':
      case 'timestamp':
        if (href && href.trim() !== '') {
          router.push(href)
        }
        break
    }
    showTools.value = false
    mobileOpen.value = false
  } else {
    // 处理原有导航项
    activeIndex.value = idx
    mobileOpen.value = false
    if (href) {
      router.push(href)
    }
  }
}
</script>

<style scoped>
/* reset small things */
* {
  box-sizing: border-box;
}

.topbar {
  background: #052630;
  /* 深色背景，类似 nodejs 头部风格 */
  color: #fff;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.container {
  width: 100%;
  max-width: 1100px;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: left;
  gap: 1rem;
  min-height: 60px;
  position: relative;
  /* 添加相对定位 */
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  position: absolute;
  /* 使用绝对定位 */
}

.logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.brand-text {
  font-weight: 600;
  letter-spacing: 0.2px;
  font-size: 1.05rem;
}

/* Toggle for mobile */
.menu-toggle {
  margin-left: auto;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: none;
  padding: 0.25rem;
}

.menu-toggle:focus {
  outline: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.hamburger {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  position: relative;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #fff;
}

.hamburger::before {
  top: -6px;
}

.hamburger::after {
  bottom: -6px;
}

/* Nav */
.nav {
  margin-left: 10rem;
}

.nav ul {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav a {
  display: inline-block;
  padding: 0.6rem 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background 120ms, color 120ms;
  position: relative;
}

.nav a:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.nav a.active {
  color: #00d09c;
  /* 活动项颜色，类似强调色 */
  background: rgba(0, 208, 156, 0.06);
  box-shadow: inset 0 -4px 0 rgba(0, 208, 156, 0.12);
}

/* Dropdown menu styles */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #052630;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 0.5rem 0;
  margin-top: 0.25rem;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.dropdown-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.dropdown-menu a {
  display: block;
  padding: 0.6rem 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background 120ms, color 120ms;
  border-radius: 0;
  border: none;
  box-shadow: none;
  width: 100%;
  text-align: left;
}

.dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.dropdown-menu a.active {
  color: #00d09c;
  background: rgba(0, 208, 156, 0.06);
}

/* Accessibility helper */
.sr-only {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Responsive: collapse into hamburger on small screens */
@media (max-width: 760px) {
  .menu-toggle {
    display: inline-block;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #052630;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transform-origin: top;
    transition: transform 180ms ease, opacity 180ms ease;
    opacity: 0;
    transform: scaleY(0);
    pointer-events: none;
  }

  .nav.open {
    opacity: 1;
    transform: scaleY(1);
    pointer-events: auto;
  }

  .nav ul {
    flex-direction: column;
    gap: 0;
  }

  .nav a {
    padding: 0.85rem 1rem;
    border-radius: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
  }

  .dropdown-menu {
    position: static;
    display: block !important;
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: 1rem;
  }

  .dropdown-menu a {
    padding: 0.85rem 1rem;
    border-radius: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
  }

  .brand-text {
    display: none;
  }

  /* 简化小屏显示 */
}
</style>